const { JSDOM } = require("jsdom")
const fs = require('node:fs')

const root = new JSDOM(`<!DOCTYPE html><html><body>
   <div id="app"></div>
</body></html>`)

const window = root.window
const document = window.document

// 在node18之后可以直接使用fetch，用法和浏览器一致
fetch('https://api.thecatapi.com/v1/images/search?limit=10&page=1').then(res => res.json()).then(data => {
    const app = document.getElementById('app')
    data.forEach(item=>{
        const img =  document.createElement('img')
        img.src = item.url
        img.style.width = '200px'
        img.style.height = '200px'
        app.appendChild(img)
    })
    // 创建文件并写入文件内容
    fs.writeFileSync('./index.html', root.serialize())
})